<template>

  <div>
    <div id="icon">
      <i class="el-icon-s-data"></i>
      学生信息
    </div>
    <div id="formView">
      <el-row type="flex" justify="center">
        <el-col :span="10">
          <el-form :label-position="labelPosition"  :rules="rules" ref="form" label-width="80px" :model="form">
            <el-form-item label="学号">
              <el-input v-model="form.studentNumber" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form.studentName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="院系">
              <el-input v-model="form.departmentName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="专业">
              <el-input v-model="form.majorName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="班级">
              <el-input v-model="form.className" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="Email" prop="studentEmail">
              <el-input v-model="form.studentEmail"></el-input>
            </el-form-item>
            <el-form-item label="日期" align="left">
              <el-date-picker
                v-model="form.studentBirthday"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item align="left" label="性别">
              <el-radio disabled v-model="form.studentSex" label="1">男</el-radio>
              <el-radio disabled v-model="form.studentSex" label="0">女</el-radio>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.studentPassword" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('rules')">修改</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>


</template>

<script>
  import {get, post} from "../../../common/request";

    export default {
        name: "StudentInfo",
      data() {
        return {
          labelPosition: 'right',
          form: {
            studentNumber: "",
            studentName: "",
            departmentName: "",
            majorName: "",
            className: "",
            studentEmail: "",
            studentBirthday: "",
            studentSex: "1",
            studentPassword: ""
          },
          rules: {
            studentEmail: [
              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ]
          }
        };
      },
      methods:{
          getData(){
            get("/rc-student/showInfo").then(x=>{
              if (x.code==1){
                this.form = x.data;
              }else{
                this.$message({
                  message: x.msg,
                  type: 'error'
                });
              }
            });
          },
        onSubmit(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              var changeData ={
                studentEmail: this.form.studentEmail,
                studentBirthday: this.form.studentBirthday,
                studentPassword: this.form.studentPassword
              };
              post("/rc-student/changeInfo",changeData).then(x=>{
                if (x.code==1){
                  this.$message({
                    message: x.msg,
                    type: 'success'
                  });
                  this.getData();
                } else {
                  this.$message({
                    message: x.msg,
                    type: 'error'
                  });
                }
              })
            } else {
              this.$message({
                message: "请填写正确的邮箱地址",
                type: 'error'
              });
              return false;
            }
          });

        }
      },
      mounted(){
          this.getData();
      }
    }
</script>

<style scoped>
  #icon{
    text-align: left;
    color: gray;
    line-height: 20px;
  }
  #formView{
    background-color: white;
    border-radius: 5px;
    border: 1px solid lightgrey;
    margin-top: 10px;
    padding: 10px 30px 10px 30px;
  }
</style>
